<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM</title>
</head>
<body>
    <!-- <div class="one">
        hello
    </div> -->
    <!-- <button>这是一个按钮</button> -->
    <!-- <button onclick="f()">按钮</button> -->
    
    <!-- 这些要放在JS代码之前 --> 
    <!-- <div id="screen">hello world</div>
    <button id="btn">获取内容</button> -->
    <!-- <button id="btn2">修改内容</button> -->

    <!-- 在弄一个div显示整数,按钮,点击之后每次按钮都会让这个整数加1 -->
    <!-- <div id="num">
        0
    </div> -->
    <!-- <button id="plus">
        +
    </button>
    <input type="text" id="screen" value="0"> -->
    <!-- input是一个单标签,没有innerHTML属性,因此想要获得input里面的东西就要用value属性才可以 -->
    <!-- <img src="dog.jpg"> -->
    <!-- 一个HTML标齐里面有什么属性,就可以通过JS中的dom对象来获取到一样的属性  可以通过console.dir就可以打印出一个dom对象里面的所有属性 -->
    
    <!-- 全选 -->
    <!-- <input type="checkbox" id="all">我全都要<br>
    <input type="checkbox" id="g">张三<br>
    <input type="checkbox" id="g">李四<br>
    <input type="checkbox" id="g">王五<br> -->

    <!-- <div style="font-size: 20px;">一个div</div>  -->
    <!-- <style>
        div{
            height: 500px;
            width: 500px;
        }
        .light{
            
            background-color: #fff;
            color: black;
        }
        .dark{
            
            background-color: black;
            color: #fff;
        }
    </style>
    <div class="light">
        <span>这是一大段话</span><br>
        <span>这是一大段话</span><br>
        <span>这是一大段话</span><br>
        <span>这是一大段话</span>
    </div> -->
    <!-- <button id="btn">关灯</button> -->



    <!-- <div class="container">

    </div>
    <button id="btn">
        删除节点
    </button>     -->


    <!-- <ul>
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
    </ul> -->
    <script>
        //针对元素操作,其实是操作元素的属性,(元素本身没有发生改变) 而针对节点进行操作,其实是 新增节点/删除节点
        //新增节点1.创建新节点,2.把节点挂在dom树上
        // let newDiv = document.createElement('div');//通过这个createElement就可以创建一个新的div(后面的参数只能是元素名)
        // newDiv.id = 'newDiv';
        // newDiv.className = 'one';
        // newDiv.innerHTML = 'hello';
        // //2.把节点挂在dom树上  可以使用appendChild把节点插入到某个节点的子元素中
        // let container = document.querySelector('.container');
        // container.appendChild(newDiv);//这样就可以插入元素了

        // // //删除节点:先拿到父节点然后在拿到待删除的子节点就可以进行删除了        通过removeChild就可以进行删除了
        // let btn = document.querySelector('#btn');
        // btn.onclick = function(){
        //     container.removeChild(newDiv);
        // }

        // 夜间模式:
        // let div = document.querySelector('.light');
        // //let btn = document.querySelector('#btn');
        // btn.onclick = function(){
        //     if(div.className == 'light'){//通过class来切换样式
        //         div.className = 'dark';
        //         btn.innerHTML = '开灯';
        //     }else if(div.className == 'dark'){
        //         div.className = 'light';
        //         btn.innerHTML = '关灯';
        //     }
        // }

        // 夜间模式: 通过点击界面来进行转换
        // let div = document.querySelector('.light');
        // //let btn = document.querySelector('#btn');
        // div.onclick = function(){
        //     if(div.className == 'light'){//通过class来切换样式
        //         div.className = 'dark';
        //         btn.innerHTML = '开灯';
        //     }else if(div.className == 'dark'){
        //         div.className = 'light';
        //         btn.innerHTML = '关灯';
        //     }
        // }
        //操作元素样式  style对应行内样式(直接把样式写到style里面) className/classList对应的内部样式/外部样式 应用了一个/一组CSS类名
        //点击放大字体
        // let div = document.querySelector('div');
        // div.onclick = function (){
        //     let size = div.style.fontSize;//通过这样就可以获得div的字体大小,注意这里的驼峰命名法,在CSS中不区分大小写,因此是使用-来命名,而在JS中不能使用-来当做名字因此就改成驼峰命名法
        //     //这里得到的大小是数字+px,因此要将其改成整数
        //     size = parseInt(size);//转换的时候碰到不是数字的就会停止了
        //     size += 5;
        //     div.style.fontSize = size + 'px';//注意这里要加单位否则不起作用
        // }
        //在HTML中类名的属性是class,但是在JS中class(ES6中引入了类的概念)是一个关键字,因此就会把这个属性名改成className/classList
       



        //input 表单元素的专有属性 
        //实现一个全选属性  checked属性
        // let all = document.querySelector('#all');//全选的元素
        // let gs = document.querySelectorAll('#g');//每一个选项的元素
        // all.onclick = function(){
        //     for(let i = 0;i < gs.length;i ++){
        //         gs[i].checked = all.checked;
        //         //先实现全选和全不选
        //     }
        // }
        // //然后实现每一个选项的事件
        // for(let i = 0;i < gs.length;i ++){
        //     gs[i].onclick = function(){
        //         //看所有的选项里面有没有没选的,有没选的就让all的选项为不选状态,全都选择了就让all的选项选择上
        //         all.checked = checkG(gs);
        //     }
        // }
        // function checkG(gs){
        //     for(let i = 0;i < gs.length;i ++){
        //         if(!gs[i].checked){
        //             //如果有一个没有选中,直接返回 不选
        //             return '';
        //         }
        //     }
        //     //全部都选了,就返回checked
        //     return 'checked';
        // }



        //2.操作元素属性 通过dom对象.属性名 就可以进行操作了
        // let img = document.querySelector('img');
        // img.onclick = function(){
        //         let s = img.src;
        //     if(s.indexOf('dog.jpg') >= 0){//是否包含这个地址
        //         img.src = 'b.jpg';
        //     }else if(s.indexOf('b.jpg') >= 0){
        //         img.src = 'dog.jpg';
        //     }    
        // }

        


        // let fbtn = document.querySelector('#plus');
        // fbtn.onclick = function(){
        //     //1.获取元素内容
        //     // let num = document.querySelector('#num');
        //     // let val = num.innerHTML;//这里获得的其实是一个string类型,因此想要自增就需要将这个字符串转换成整数才可以
        //     // val = parseInt(val);
        //     // //2.自增
        //     // val += 1;
        //     // //3.写回
        //     // num.innerHTML = val;

        //     //获取input里面的东西
        //     let num = document.querySelector('#screen');
        //     let val = num.value;
        //     val = parseInt(val);
        //     //自增
        //     val += 1;
        //     //写回
        //     num.value = val;
        // }

        //其实浏览器给JS提供的API是非常丰富的,其中包括DOM API ,BOM AP还有websocket API,canvas API而这些统称为Web API(这里主要介绍DOM API)

        //丶获取元素(使用DOM的基础) 想操作页面上的元素,就需要先拿到对应的JS对象,DOM其实提供了一组能获得页面元素的API,这里介绍两个最重要的:  querySelector,querySelectorAll
        //这两其实是一个document(页面中的全局变量,一个页面加载好了,就会自动生成一个全局变量,就叫这个,这里面有一些属性和方法,就可以操作页面的内容)这样对象的属性

        // let div = document.querySelector('.one');//querySelector的参数其实就是一个CSS的选择器(各种选择器都可),通过这样就可以选中这个元素  这个div名字是可以随便去的
        // console.log(div);

        //而如果选中的元素是有多个的,再使用querySelector就会选中第一个元素(匹配结果的第一个),
        //而想要全部选择就得使用querySelectorAll(会返回一个类似于数组的东西,准确的说返回的不是一个真正的原生数组,而是一个对象,不过这个对象有length,也能通过下标来访问内部元素,这样的对象使用起来其实和数组是一模一样的,这样的一般称为"伪数组") 例如ul li(多个)
        // let l = document.querySelectorAll('li');
        // console.log(l);

        //丶事件,其实JS中的很多代码都是通过事件来触发的,事件其实就是浏览器对于用户的操作行为进行的一个"统称(准确的说事件也不一定全是用户操作产生的,但大部分都是的)  因此JS做的主要工作就是在不同的事件中进行不同的处理
        //事件的三要素:1.事件源:哪个HTML元素产生的事件,2.事件类型:鼠标移动,鼠标点击,键盘事件(具体这个事件做了什么) 3.事件的处理程序:当事件产生之后,执行什么样的JS代码
        //例如点击事件:
        // let b = document.querySelector('button');
        // b.onclick = function(){
        //     alert('hello');
        // }
        //这个函数可以称为回调函数,会在合适的时机进行调用
        //也可以直接在button里面直接写onclick事件,但是不太建议这样写,还是上面的写法更常见一些,下面的会把页面写的更乱
        // function f(){
        //     alert('hello');
        // }

        //丶操作元素(获取和修改) 1.操作元素内容,2.操作元素属性,3.操作元素样式
        //1.操作元素内容 通过对象里面的一个属性innerHTML来实现(元素里面包含的html代码是什么样的)

        // let btn = document.querySelector('#btn');
        // btn.onclick = function() {
        //     let screen = document.querySelector('#screen');
        //     console.log(screen.innerHTML);
        //     // 里面是啥就可以获取到什么内容
        // }
        // 点击多次不会把同样的结果显示多次,而是显示了一个数字,这也是可以设置的,设置之后就可以显示多条了

        // let btn2 = document.querySelector('#btn2');
        // btn2.onclick = function (){
        //     let screen = document.querySelector('#screen');
        //     screen.innerHTML = '<h1>修改后</h1>';
        //     //就可以进行修改了
        // }
    </script>

</body>
</html>